<template>
	<div class="panel-wrapper row">
		<div class="label row items-center">
			<el-tooltip
				placement="right"
				effect="light"
				content="车辆入场/出场时识别到车牌在本规则固定车牌范围，将进行预警"
			>
				<img class="tip-img" src="@/assets/images/home/question.png" alt="" />
			</el-tooltip>

			<span>匹配全车牌：</span>
		</div>
		<div class="box">
			<TagBox v-bind="$attrs" :isOpenWarning="isOpenWarning" />
			<div class="opr-line row items-center">
				<el-input
					size="small"
					v-model="inputValue"
					placeholder="请输入完整车牌号"
					style="width: 200px"
					:disabled="!isOpenWarning"
				>
					<template #append>
						<el-select
							:disabled="!isOpenWarning"
							v-model="codeVal"
							placeholder=""
							size="small"
							style="width: 60px"
						>
							<el-option
								v-for="item in codeOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</template>
				</el-input>
				<el-button
					class="p-button"
					size="small"
					@click="addLicense"
					:disabled="!isOpenWarning"
				>
					+ 全车牌号
				</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import TagBox from "@/components/TagBox/index.vue";
import { validateLicensePlate } from "@/utils/common.ts";
import { ElMessage } from "element-plus";

import { ref } from "vue";
const emit = defineEmits(["addLicense"]);
const props = defineProps({
	isOpenWarning: {
		type: Boolean,
		default: () => true,
	},
});
const inputValue = ref("");
const codeVal = ref("蓝");
const codeOptions = ref([
	{
		label: "蓝",
		value: "蓝",
	},
	{
		label: "黄",
		value: "黄",
	},
	{
		label: "绿",
		value: "绿",
	},
	{
		label: "白",
		value: "白",
	},
	{
		label: "黑",
		value: "黑",
	},
]);

const addLicense = () => {
	if (!validateLicensePlate(inputValue.value)) {
		ElMessage({
			message: "请填写完整的车牌信息",
			type: "warning",
		});
		return;
	}

	let license = inputValue.value + "(" + codeVal.value + ")";
	emit("addLicense", license);
	inputValue.value = "";
};
</script>

<style scoped lang="scss">
.panel-wrapper {
	margin-top: 24px;
	.tip-img {
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}
	.label {
		width: 120px;
		margin-right: 8px;
	}

	.opr-line {
		margin-top: 12px;
		.p-button {
			margin-left: 12px;
		}
	}
}
</style>
